<template>
  <div class="full-screen">
    <div ref="fixedSpace">
      <!-- 页头 -->
      <div class="nav-bar">
        <van-nav-bar fixed
                     title="艺术作品详情"
                     left-arrow
                     @click-left="$router.go(-1)"></van-nav-bar>
      </div>

      <!-- 标题以及审核栏 -->
      <detail-title @refreshOffset="refreshOffset" />
    </div>
    <!-- 项目详细信息 -->
    <van-tabs v-model:active="active"
              @rendered="rendered"
              :offset-top="offset"
              :lazy-render="true"
              ref="tabsRef"
              sticky>
      <detail-basic ref="basic" />
      <detail-person ref="person"
                     :isProduct="true" />
    </van-tabs>
  </div>
</template>

<script>
import { ref, toRefs, provide } from 'vue'
import DetailTitle from '@/pages/Business/PubComponents/Detail/DetailTitle.vue'
import DetailBasic from '@/pages/Business/PubComponents/Detail/DetailBasic.vue'
import DetailPerson from '@/pages/Business/PubComponents/Detail/DetailPerson.vue'
import useDetail from '@/hooks/useDetail'

export default {
  components: {
    DetailTitle, DetailBasic, DetailPerson
  },

  props: {
    id: {
      require: true,
      type: String
    }
  },

  setup (props) {
    // 初始化tabs子页签实例，用于状态管理
    const basic = ref()
    const person = ref()

    const {
      fixedSpace,
      pushChild,
      rendered,
      refreshOffset,
      tabsRef,
      tabState
    } = useDetail()

    // 将实例统一管理
    pushChild(basic, person)

    // 为子组件提供模块id -> beanId 和详情页对应实体的id
    provide('beanId', 'artproduct')
    provide('id', props.id)

    return {
      ...toRefs(tabState),
      fixedSpace,
      rendered,
      tabsRef,
      person,
      basic,
      refreshOffset
    }
  }
}
</script>